<template>
  <el-progress type="dashboard" :percentage="percentage" :width="80">
    <template #default="{ percentage }">
      <span class="percentage-value">{{ percentage }}%</span>
    </template>
  </el-progress>
</template>

<script lang="ts" setup name="ProgressNode">
import { inject, onMounted, ref } from 'vue'
import { EventType } from '@logicflow/core'
import { vueNodesMap } from '@logicflow/vue-node-registry'
const getNode:any = inject('getNode')
const getGraph: any = inject('getGraph')
const percentage = ref(80)
onMounted(() => {
  const node = getNode()
  const graph = getGraph()
  graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData: any) => {
    const keys = eventData.keys as string[]
    const content = vueNodesMap[node.type]
    if (content && eventData.id === node.id) {
      const { effect } = content

      // 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
      if (!effect || keys.some((key) => effect.includes(key))) {
        console.log('eventData --->>>', eventData)
        percentage.value = eventData.properties?.progress || 0
      }
    }
  })
}
)

</script>
